<template>
  <div class="box">
    <header class="header">
      <van-nav-bar title="我的信息" left-arrow @click-left="$router.back()">
      </van-nav-bar>
    </header>
    <div class="content">
      <div>
        <van-image
          width="50"
          height="50"
          radius="50%"
          :src="avatar"
        />
        <span>{{nickname}}</span>
      </div>
      <button @click="logout" class="goout">退出登录</button>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import { mapMutations } from 'vuex'
import { NavBar, Image as VanImage } from 'vant'
import { getUserInfo } from '@/api/user'

Vue.use(NavBar)
Vue.use(VanImage)
export default {
  data () {
    return {
      avatar: '',
      nickname: ''
    }
  },
  mounted () {
    this.getUserInfo()
  },
  methods: {
    ...mapMutations({ // 在当前的组件中生成changeIsLogin函数，实际上就是this.$store.commit('changeIsLogin', false)
      changeIsLogin: 'user/changeIsLogin' // 按照模块操作
    }),
    async getUserInfo () {
      var res = await getUserInfo({
        userid: localStorage.getItem('userid')
      })
      if (res.data.code === '200') {
        this.avatar = res.data.data[0].avatar
        this.nickname = res.data.data[0].nickname
      }
    },
    logout () {
      localStorage.removeItem('userid')
      localStorage.removeItem('token')
      localStorage.removeItem('isLogin')
      localStorage.removeItem('cartsNum')
      this.changeIsLogin(false)
      this.$router.replace('/login')
    }
  }
}
</script>

<style lang="stylus" scoped>
.goout
  position: absolute
  bottom: 80px
  width: 90%
  margin-left 5%
  height: 40px
  border-radius: 20px
  background-color: #EE0A24
  color: #fff
  border none
.content
  width: 94%
  margin: 0 auto
  div
    border-bottom: 1px solid #999
    .van-image
      margin: 10px
      background-color: blue
      vertical-align: middle
</style>
